import { useState, useEffect } from 'react';
import { Layout, Menu } from 'antd';
import {
    UserOutlined,
    VideoCameraOutlined,
    UploadOutlined
} from '@ant-design/icons';
import { useNavigate, useLocation } from 'react-router-dom';
import PropTypes from 'prop-types';

const { Sider } = Layout;

//决定现在边框收起状态是页面现在处于那里
const AdminSider = ({ collapsed }) => {
    const navigate = useNavigate();
    const location = useLocation();
    const [selectedKey, setSelectedKey] = useState('1');

    useEffect(() => {
        const path = location.pathname;
        switch (path) {
            case '/admin':
                setSelectedKey('1');
                break;
            case '/admin/usermanagement':
                setSelectedKey('2');
                break;
            case '/admin/productmanagement':
                setSelectedKey('3');
                break;
            case '/admin/productcategory':
                setSelectedKey('4');
                break;
            case '/admin/ordermanagement':
                setSelectedKey('5');
                break;
            case '/admin/admanagement':
                setSelectedKey('6');
                break;
            default:
                setSelectedKey('1');
        }
    }, [location]);

    const menuItems = [
        {
            key: '1',
            icon: <UserOutlined />,
            label: '数据概况',
            onClick: () => navigate('/admin')
        },
        {
            key: '2',
            icon: <VideoCameraOutlined />,
            label: '用户信息管理',
            onClick: () => navigate('/admin/usermanagement')
        },
        {
            key: '3',
            icon: <UploadOutlined />,
            label: '商品信息管理',
            onClick: () => navigate('/admin/productmanagement')
        },
        {
            key: '4',
            icon: <UploadOutlined />,
            label: '商品分类管理',
            onClick: () => navigate('/admin/productcategory')
        },
        {
            key: '5',
            icon: <UploadOutlined />,
            label: '订单信息管理',
            onClick: () => navigate('/admin/ordermanagement')
        },
        {
            key: '6',
            icon: <UploadOutlined />,
            label: '广告投放管理',
            onClick: () => navigate('/admin/admanagement')
        }
    ];

    return (
        <Sider trigger={null} collapsible collapsed={collapsed}>
            <div style={{ color: 'white', padding: '16px', textAlign: 'center' }}>
                重邮云超市管理系统
            </div>
            <Menu
                theme="dark"
                mode="inline"
                selectedKeys={[selectedKey]}
                items={menuItems}
            />
        </Sider>
    );
};

AdminSider.propTypes = {
    collapsed: PropTypes.bool.isRequired
};

export default AdminSider;
